<template>
  <div>
    <Header></Header>
    <div class="container">
      <!--主体部分-->
      <el-steps :active="3" align-center>
        <el-step description="选择影片场次"></el-step>
        <el-step description="选择座位"></el-step>
        <el-step description="14分钟内付款"></el-step>
        <el-step description="影院取票观影"></el-step>
      </el-steps>

      <!-- 主体 -->
      <div class="box clearfix">
        <div class="left">
          <div class="seat-header">
            <div class="selectseat example">
              <img src="../assets/seat/bg-sit.png" alt="" />
              <span>可选座位</span>
            </div>
            <div class="soldseat example">
              <img src="../assets/seat/bg-sited.png" alt="" />
              <span>已售座位</span>
            </div>
            <div class="selectedseat example">
              <img src="../assets/seat/bg-s.png" alt="" />
              <span>已选座位</span>
            </div>
            <div class="coupleseat ">
              <img src="../assets/seat/1.png" />
              <span>情侣座位</span>
            </div>
          </div>
          <div class="seat-body">
            <div class="seat-container-header">
              <span>银幕中央</span>
            </div>
            <div
              v-for="(item, i) in 9"
              class="row"
              style="margin-left: 15px;float:left; margin-top:3px;"
            >
              <div class="sit1" style="margin-right:20px">
                {{ i + 1 }}
              </div>
              <div
                @click="selectSeat(item1, j, i)"
                :class="[
                  'sit',
                  { 'bg-temp': item1.seatType == 3 },
                  { 'bg-sited': item1.seatType == 2 },
                  { 'bg-sit': item1.seatType == 1 },
                  { 'bg-nosit': item1.seatType == 0 }
                ]"
                v-for="(item1, j) in seatsList.slice(i * 10, i * 10 + 10)"
              ></div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="movie-info">
            <div class="poster">
              <img :src="movedetail.poster" style="width:100%;" />
            </div>
            <div class="content">
              <span class="title">{{ movedetail.name }}</span>
              <div class="info">
                <span>类型:</span>
                <span class="value">{{ movedetail.category }}</span>
              </div>
              <div class="info">
                <span>时长:</span>
                <span class="value">{{ movedetail.runtime }}分钟</span>
              </div>
            </div>
          </div>

          <div class="show-info">
            <div class="info-item">
              <span>影院:</span>
              <span class="value text-ellipsis"
                >{{ cinema.name }}({{ cinema.address }}})</span
              >
            </div>
            <div class="info-item">
              <span>影厅:</span>
              <span class="value text-ellipsis">{{ schedule.hallName }}</span>
            </div>
            <div class="info-item">
              <span>版本:</span>
              <span class="value text-ellipsis"
                >{{ schedule.filmLanguage }}{{ schedule.imagery }}</span
              >
            </div>
            <div class="info-item">
              <span>场次:</span>
              <span class="value text-ellipsis">{{
                schedule.showAt | timefilter
              }}</span>
            </div>
            <div class="info-item">
              <span>票价:</span>
              <span class="value text-ellipsis"
                >￥{{ schedule.salePrice / 100 }}/张</span
              >
            </div>
          </div>

          <div class="ticket-info">
            <div
              class="no-ticket"
              :style="msg.length == 0 ? 'display: block;' : 'display:none'"
            >
              <p class="buy-limit">座位：一次最多选六个</p>
              <p class="no-selected">请<span>点击左侧</span>座位图选择座位</p>
            </div>
            <div
              class="has-ticket"
              :style="msg.length == 0 ? 'display: none;' : 'display:block'"
              v-for="seat in msg"
            >
              <span class="text">座位：{{ seat | selectedseat }}</span>
              <div class="ticket-container" data-limit="6">
                <span
                  class="ticket"
                  data-row-id="3"
                  data-column-id="7"
                  data-index="3-7"
                  >3排7座</span
                >
              </div>
            </div>
            <div class="total-price">
              <span>总价 :</span>
              <span class="price">{{
                (schedule.salePrice / 100) * msg.length
              }}</span>
            </div>
          </div>

          <div class="confirm-order">
            <div class="cellphone">
              <span>手机号 :</span>
              <span class="phone-num">188****0584</span>
            </div>
            <div
              :class="msg.length == 0 ? 'disabled' : 'confirm-btn'"
              @click="sub"
            >
              确认选座
            </div>
          </div>
        </div>
      </div>
    </div>
    <low></low>
  </div>
</template>

<script>
import low from "../components/low";
import Header from "../components/Header";
import http from "../api/http";
import moment from "moment";
export default {
  name: "seat",
  data() {
    return {
      id: "",
      schedule: {},
      seatsList: [
        {
          seatId: 1,
          seatType: 1,
          x: 1,
          y: 1,
          sessionId: 1
        },
        {
          seatId: 2,
          seatType: 1,
          x: 1,
          y: 2,
          sessionId: 1
        },
        {
          seatId: 3,
          seatType: 1,
          x: 1,
          y: 3,
          sessionId: 1
        },
        {
          seatId: 4,
          seatType: 1,
          x: 1,
          y: 4,
          sessionId: 1
        },
        {
          seatId: 5,
          seatType: 1,
          x: 1,
          y: 5,
          sessionId: 1
        },
        {
          seatId: 6,
          seatType: 1,
          x: 1,
          y: 6,
          sessionId: 1
        },
        {
          seatId: 7,
          seatType: 1,
          x: 1,
          y: 7,
          sessionId: 1
        },
        {
          seatId: 8,
          seatType: 1,
          x: 1,
          y: 8,
          sessionId: 1
        },
        {
          seatId: 9,
          seatType: 1,
          x: 1,
          y: 9,
          sessionId: 1
        },
        {
          seatId: 10,
          seatType: 1,
          x: 1,
          y: 10,
          sessionId: 1
        },
        {
          seatId: 11,
          seatType: 1,
          x: 2,
          y: 1,
          sessionId: 1
        },
        {
          seatId: 12,
          seatType: 1,
          x: 2,
          y: 2,
          sessionId: 1
        },
        {
          seatId: 13,
          seatType: 1,
          x: 2,
          y: 3,
          sessionId: 1
        },
        {
          seatId: 14,
          seatType: 1,
          x: 2,
          y: 4,
          sessionId: 1
        },
        {
          seatId: 15,
          seatType: 1,
          x: 2,
          y: 5,
          sessionId: 1
        },
        {
          seatId: 16,
          seatType: 1,
          x: 2,
          y: 6,
          sessionId: 1
        },
        {
          seatId: 17,
          seatType: 1,
          x: 2,
          y: 7,
          sessionId: 1
        },
        {
          seatId: 18,
          seatType: 1,
          x: 2,
          y: 8,
          sessionId: 1
        },
        {
          seatId: 19,
          seatType: 1,
          x: 2,
          y: 9,
          sessionId: 1
        },
        {
          seatId: 20,
          seatType: 1,
          x: 2,
          y: 10,
          sessionId: 1
        },
        {
          seatId: 21,
          seatType: 1,
          x: 3,
          y: 1,
          sessionId: 1
        },
        {
          seatId: 22,
          seatType: 1,
          x: 3,
          y: 2,
          sessionId: 1
        },
        {
          seatId: 23,
          seatType: 1,
          x: 3,
          y: 3,
          sessionId: 1
        },
        {
          seatId: 24,
          seatType: 1,
          x: 3,
          y: 4,
          sessionId: 1
        },
        {
          seatId: 25,
          seatType: 1,
          x: 3,
          y: 5,
          sessionId: 1
        },
        {
          seatId: 26,
          seatType: 1,
          x: 3,
          y: 6,
          sessionId: 1
        },
        {
          seatId: 27,
          seatType: 1,
          x: 3,
          y: 7,
          sessionId: 1
        },
        {
          seatId: 28,
          seatType: 1,
          x: 3,
          y: 8,
          sessionId: 1
        },
        {
          seatId: 29,
          seatType: 1,
          x: 3,
          y: 9,
          sessionId: 1
        },
        {
          seatId: 30,
          seatType: 1,
          x: 3,
          y: 10,
          sessionId: 1
        },
        {
          seatId: 31,
          seatType: 1,
          x: 4,
          y: 1,
          sessionId: 1
        },
        {
          seatId: 32,
          seatType: 1,
          x: 4,
          y: 2,
          sessionId: 1
        },
        {
          seatId: 33,
          seatType: 1,
          x: 4,
          y: 3,
          sessionId: 1
        },
        {
          seatId: 34,
          seatType: 1,
          x: 4,
          y: 4,
          sessionId: 1
        },
        {
          seatId: 35,
          seatType: 1,
          x: 4,
          y: 5,
          sessionId: 1
        },
        {
          seatId: 36,
          seatType: 1,
          x: 4,
          y: 6,
          sessionId: 1
        },
        {
          seatId: 37,
          seatType: 1,
          x: 4,
          y: 7,
          sessionId: 1
        },
        {
          seatId: 38,
          seatType: 1,
          x: 4,
          y: 8,
          sessionId: 1
        },
        {
          seatId: 39,
          seatType: 1,
          x: 4,
          y: 9,
          sessionId: 1
        },
        {
          seatId: 40,
          seatType: 1,
          x: 4,
          y: 10,
          sessionId: 1
        },
        {
          seatId: 41,
          seatType: 1,
          x: 5,
          y: 1,
          sessionId: 1
        },
        {
          seatId: 42,
          seatType: 1,
          x: 5,
          y: 2,
          sessionId: 1
        },
        {
          seatId: 43,
          seatType: 1,
          x: 5,
          y: 3,
          sessionId: 1
        },
        {
          seatId: 44,
          seatType: 1,
          x: 5,
          y: 4,
          sessionId: 1
        },
        {
          seatId: 45,
          seatType: 1,
          x: 5,
          y: 5,
          sessionId: 1
        },
        {
          seatId: 46,
          seatType: 1,
          x: 5,
          y: 6,
          sessionId: 1
        },
        {
          seatId: 47,
          seatType: 1,
          x: 5,
          y: 7,
          sessionId: 1
        },
        {
          seatId: 48,
          seatType: 1,
          x: 5,
          y: 8,
          sessionId: 1
        },
        {
          seatId: 49,
          seatType: 1,
          x: 5,
          y: 9,
          sessionId: 1
        },
        {
          seatId: 50,
          seatType: 1,
          x: 5,
          y: 10,
          sessionId: 1
        },
        {
          seatId: 51,
          seatType: 1,
          x: 6,
          y: 1,
          sessionId: 1
        },
        {
          seatId: 52,
          seatType: 1,
          x: 6,
          y: 2,
          sessionId: 1
        },
        {
          seatId: 53,
          seatType: 1,
          x: 6,
          y: 3,
          sessionId: 1
        },
        {
          seatId: 54,
          seatType: 1,
          x: 6,
          y: 4,
          sessionId: 1
        },
        {
          seatId: 55,
          seatType: 1,
          x: 6,
          y: 5,
          sessionId: 1
        },
        {
          seatId: 56,
          seatType: 1,
          x: 6,
          y: 6,
          sessionId: 1
        },
        {
          seatId: 57,
          seatType: 1,
          x: 6,
          y: 7,
          sessionId: 1
        },
        {
          seatId: 58,
          seatType: 1,
          x: 6,
          y: 8,
          sessionId: 1
        },
        {
          seatId: 59,
          seatType: 1,
          x: 6,
          y: 9,
          sessionId: 1
        },
        {
          seatId: 60,
          seatType: 1,
          x: 6,
          y: 10,
          sessionId: 1
        },
        {
          seatId: 61,
          seatType: 1,
          x: 7,
          y: 1,
          sessionId: 1
        },
        {
          seatId: 62,
          seatType: 1,
          x: 7,
          y: 2,
          sessionId: 1
        },
        {
          seatId: 63,
          seatType: 1,
          x: 7,
          y: 3,
          sessionId: 1
        },
        {
          seatId: 64,
          seatType: 1,
          x: 7,
          y: 4,
          sessionId: 1
        },
        {
          seatId: 65,
          seatType: 1,
          x: 7,
          y: 5,
          sessionId: 1
        },
        {
          seatId: 66,
          seatType: 1,
          x: 7,
          y: 6,
          sessionId: 1
        },
        {
          seatId: 67,
          seatType: 1,
          x: 7,
          y: 7,
          sessionId: 1
        },
        {
          seatId: 68,
          seatType: 1,
          x: 7,
          y: 8,
          sessionId: 1
        },
        {
          seatId: 69,
          seatType: 1,
          x: 7,
          y: 9,
          sessionId: 1
        },
        {
          seatId: 70,
          seatType: 1,
          x: 7,
          y: 10,
          sessionId: 1
        },
        {
          seatId: 71,
          seatType: 1,
          x: 8,
          y: 1,
          sessionId: 1
        },
        {
          seatId: 72,
          seatType: 1,
          x: 8,
          y: 2,
          sessionId: 1
        },
        {
          seatId: 73,
          seatType: 1,
          x: 8,
          y: 3,
          sessionId: 1
        },
        {
          seatId: 74,
          seatType: 1,
          x: 8,
          y: 4,
          sessionId: 1
        },
        {
          seatId: 75,
          seatType: 1,
          x: 8,
          y: 5,
          sessionId: 1
        },
        {
          seatId: 76,
          seatType: 1,
          x: 8,
          y: 6,
          sessionId: 1
        },
        {
          seatId: 77,
          seatType: 1,
          x: 8,
          y: 7,
          sessionId: 1
        },
        {
          seatId: 78,
          seatType: 1,
          x: 8,
          y: 8,
          sessionId: 1
        },
        {
          seatId: 79,
          seatType: 1,
          x: 8,
          y: 9,
          sessionId: 1
        },
        {
          seatId: 80,
          seatType: 1,
          x: 8,
          y: 10,
          sessionId: 1
        },
        {
          seatId: 81,
          seatType: 1,
          x: 9,
          y: 1,
          sessionId: 1
        },
        {
          seatId: 82,
          seatType: 1,
          x: 9,
          y: 2,
          sessionId: 1
        },
        {
          seatId: 83,
          seatType: 1,
          x: 9,
          y: 3,
          sessionId: 1
        },
        {
          seatId: 84,
          seatType: 1,
          x: 9,
          y: 4,
          sessionId: 1
        },
        {
          seatId: 85,
          seatType: 1,
          x: 9,
          y: 5,
          sessionId: 1
        },
        {
          seatId: 86,
          seatType: 1,
          x: 9,
          y: 6,
          sessionId: 1
        },
        {
          seatId: 87,
          seatType: 1,
          x: 9,
          y: 7,
          sessionId: 1
        },
        {
          seatId: 88,
          seatType: 1,
          x: 9,
          y: 8,
          sessionId: 1
        },
        {
          seatId: 89,
          seatType: 1,
          x: 9,
          y: 9,
          sessionId: 1
        },
        {
          seatId: 90,
          seatType: 1,
          x: 9,
          y: 10,
          sessionId: 1
        }
      ],
      //   已选座数
      msgCount: 0,
      // 选座信息
      msg: [],
      movedetail: null,
      cityId: "",
      cinema: null
    };
  },
  components: {
    low,
    Header
  },
  created() {
    this.id = this.$route.query.id;
    console.log(this.id);
    this.schedule = this.$route.query.schedule;
    console.log(this.schedule);
    this.cityId = this.$route.query.cityId;
    console.log(this.cityId);
  },
  methods: {
    selectSeat(data, j, s) {
      if (data.seatType == 1 && this.msgCount <= 3) {
        this.$set(this.msg, this.msgCount++, [data.seatId, data.x, data.y]);
        this.seatsList[s * 10 + j].seatType = 3;
      } else if (data.seatType == 3) {
        var temp = null;

        for (var i = 0; i < this.msg.length; i++) {
          // 删除数据
          if (this.msg[i][0] == data.seatId) {
            temp = i;
            break;
          }
        }
        this.msgCount--;
        this.$delete(this.msg, temp);
        this.seatsList[s * 10 + j].seatType = 1;
      } else {
        if (this.msgCount == 4) {
          alert("最多只能定四张票");
        }
        if (data.seatType == 2) {
          alert("此座位已售");
        }
      }
    },
    sub() {
      var result = this.msg.every(value => {
        var sign = false;
        for (i in this.msg) {
          if (
            (Math.abs(this.msg[i][1] - value[1]) == 0 &&
              Math.abs(this.msg[i][2] - value[2]) == 1) ||
            (Math.abs(this.msg[i][1] - value[1]) == 1 &&
              Math.abs(this.msg[i][2] - value[2]) == 0)
          ) {
            sign = true;
          }
        }
        return sign;
      });

      if (result == false) {
        alert("不能为空");
      } else {
        for (var i = 0; i < this.msg.length; i++) {
          let x = this.msg[i][1];
          let y = this.msg[i][2];
          this.seatsList[(x - 1) * 10 + y - 1].seatType = 2;
        }
        alert("订票成功");
        this.$router.push("/pay");
      }
    }
  },
  mounted() {
    http({
      url: `gateway?filmId=${this.id}&k=3869895`,
      headers: {
        "X-Host": "mall.film-ticket.film.info"
      }
    }).then(res => {
      if (res.status == 0) {
        console.log(res.data);
        let { film } = res.data;
        this.movedetail = film;
      }
    });
    http({
      url: `/gateway?cinemaId=${this.$route.query.id}&k=335057`,
      headers: {
        "X-Host": "mall.film-ticket.cinema.info"
      }
    }).then(res => {
      let { cinema } = res.data;
      console.log(res.data);
      this.cinema = cinema;
    });
  },
  filters: {
    // 时间过滤器
    timefilter(time) {
      return moment(time * 1000).format("HH:mm");
    },
    selectedseat(data) {
      return data[1] + "排 |" + data[2] + "座";
    }
  }
};
</script>
<style scoped>
.container {
  width: 1200px;
  margin: 0 auto;
}

.el-steps {
  margin-top: 60px;
  margin-bottom: 60px;
}

/* 主体 */
.box {
  border: 1px solid #e5e5e5;
  width: 100%;
  font-size: 0;
}
.box .left {
  width: 820px;
  display: inline-block;
  vertical-align: top;
}
.seat-header {
  margin: 30px 0 30px 130px;
}
.example {
  display: inline-block;
  font-size: 16px;
  color: #666;
  height: 44px;
  line-height: 44px;
  background-repeat: no-repeat;
  margin-right: 50px;
}
.selectseat span {
  float: left;
}
.selectseat img {
  height: 100%;
  float: left;
}
.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}
.soldseat span {
  float: left;
}
.soldseat img {
  height: 100%;
  float: left;
}
.selectedseat span {
  float: left;
}
.selectedseat img {
  height: 100%;
  float: left;
}
.coupleseat span {
  float: left;
}
.coupleseat img {
  float: left;
  margin-top: 10px;
}
.coupleseat {
  display: inline-block;
  font-size: 16px;
  color: #666;
  height: 44px;
  line-height: 44px;
  background-repeat: no-repeat;
  margin-right: 50px;
}
.seat-body {
  margin-left: 74px;
  overflow: hidden;
  font-size: 20px;
  white-space: nowrap;
}
.row-id {
  width: 20px;
  margin-top: 112px;
  white-space: normal;
  color: #ccc;
  white-space: normal;
  float: left;
}
.row-id span {
  font-size: 16px;
  color: #999;
  margin-right: 40px;
  margin-bottom: 10px;
  display: inline-block;
  width: 20px;
  height: 26px;
  line-height: 29px;
  text-align: center;
}
.seat-container {
  margin-left: 50px;
  overflow: auto;
  position: relative;
}
.seat-container-header {
  width: 550px;
  padding-top: 50px;
  text-align: center;
  font-size: 16px;
  color: #666;
  background: url(../assets/seat/2.png) no-repeat;
  background-position-x: center;
  position: relative;
  margin-bottom: 40px;
}
.seat-container-body {
  display: inline-block;
  min-width: 550px;
}
.seat-container-body .row {
  white-space: nowrap;
  margin-bottom: 10px;
  text-align: center;
  background-color: #ccc;
  background-size: cover;
  height: 35px;
  width: 35px;
}

.sit1 {
  height: 35px;
  width: 35px;
  min-height: 10px;
  min-width: 10px;
  margin: 4px 4px 4px 4px;
  background-size: cover;
  /* border: 1px solid black; */
  float: left;
}
.sit {
  height: 35px;
  width: 35px;
  min-height: 10px;
  min-width: 10px;
  margin: 4px 4px 4px 4px;
  background-size: cover;
  /* border: 1px solid black; */
  float: left;
}
/* 座位 */
.bg-sit {
  background-image: url(../assets/seat/bg-sit.png);
}

.bg-sit:hover {
  cursor: pointer;
}

/* 已售座位 */
.bg-sited {
  /* background-color: red; */
  cursor: pointer;
  background-image: url("../assets/seat/bg-sited.png");
}

/* 空位置 */
.bg-nosit {
  /* border: 1px solid white; */
}

/* 已选座位 */
.bg-temp {
  cursor: pointer;
  background-image: url("../assets/seat/bg-s.png");
}

.box .right {
  width: 340px;
  background-color: #f9f9f9;
  padding: 20px;
  display: inline-block;
}
.movie-info .poster {
  width: 115px;
  height: 158px;
  border: 2px solid #fff;
  -webkit-box-shadow: 0 2px 7px 0 hsl(0deg 0% 53% / 50%);
  box-shadow: 0 2px 7px 0 hsl(0deg 0% 53% / 50%);
  float: left;
}
.movie-info .content {
  margin-left: 140px;
}
.movie-info .content .title {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin: 0 0 14px;
}
.movie-info .content .info {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}
.show-info {
  margin-top: 20px;
  padding-top: 90px;
}
.show-info .info-item {
  margin-bottom: 9px;
}
.right .show-info .info-item > span {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
}
.right .show-info .info-item .value {
  width: 85%;
}
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.clearfix:after {
  clear: both;
}
.right .ticket-info {
  padding: 20px 0 10px;
  border-top: 1px dashed #e5e5e5;
  border-bottom: 1px dashed #e5e5e5;
}
.ticket-info .buy-limit {
  font-size: 14px;
  color: #999;
  margin: 0;
}
.ticket-info .no-selected {
  font-size: 14px;
  color: #333;
  text-align: center;
  margin: 28px 0 39px;
}
.ticket-info .text {
  font-size: 14px;
  color: #999;
  float: left;
}
.ticket-info .ticket-container {
  margin-left: 42px;
  margin-bottom: 20px;
  position: relative;
  top: -5px;
}
.ticket-info .total-price {
  font-size: 14px;
  color: #333;
}
.ticket-info .total-price .price {
  color: #f03d37;
  font-size: 24px;
}
.confirm-order {
  padding: 20px 0;
  text-align: center;
}
.confirm-order .cellphone {
  color: #999;
  font-size: 14px;
}
.confirm-order .confirm-btn .disabled {
  cursor: default;
  background-color: #efefef;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.confirm-order .confirm-btn {
  cursor: pointer;
  width: 260px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  border-radius: 21px;
  position: relative;
  left: 50%;
  margin: 38px 0 0 -130px;
  background-color: #f03d37;
  -webkit-box-shadow: 0 2px 10px -2px #f03d37;
  box-shadow: 0 2px 10px -2px #f03d37;
}
.ticket-info .ticket {
  cursor: default;
  position: relative;
  font-size: 12px;
  color: #f03d37;
  display: inline-block;
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 0 12px 10px 0;
  background: url(../assets/seat/3.png);
}
</style>
